<template>
  <div class="container">
    <div class="search-box">
      <el-input
        placeholder="请输入内容"
        class="input-box"
        v-model="inputValue"
      ></el-input>
      <el-button @click="clear">清除</el-button>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <el-table border style="width: 100%" :data="list">
      <el-table-column type="index" label="任务编号" width="80">
      </el-table-column>
      <el-table-column prop="name" label="任务名称"> </el-table-column>
      <el-table-column prop="des" label="任务描述"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <el-button
            size="mini"
            style="margin-right: 10px"
            @click="updateTask(row.id)"
            >编辑</el-button
          >
          <!-- 删除确认框 -->
          <!-- 气泡确认框  需要绑定confirm事件   点击确认时会触发事件 -->
          <el-popconfirm
            confirmButtonText="好的"
            cancelButtonText="不用了"
            icon="el-icon-info"
            iconColor="red"
            title="确定删除任务吗？"
            @confirm="deleteTask(row.id)"
          >
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageContainer">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :current-page="params._page"
        :page-size="params._limit"
        @current-change="pageChange"
      >
      </el-pagination>
      <el-button size="small" plain @click="openDialog">+ 新增</el-button>
    </div>

    <!-- 新增功能弹出层 -->
    <template>
      <el-dialog
        title="提示"
        :visible="addVisible"
        @close="closeDialog"
        width="500px"
      >
        <!-- 表单 -->
        <el-form ref="form" :model="addForm" :rules="rules" label-width="100px">
          <el-form-item label="任务名称" prop="name">
            <el-input
              v-model="addForm.name"
              style="width: 90%"
              placeholder="请输入任务名称"
            />
          </el-form-item>
          <el-form-item label="任务描述" prop="des">
            <el-input
              v-model="addForm.des"
              style="width: 90%"
              placeholder="请输入任务描述"
            />
          </el-form-item>
        </el-form>
        <!-- footer插槽 -->
        <template #footer>
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </template>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import {
  getList,
  addTask,
  getTaskDetail,
  editTask,
  delTask,
  searchTask,
} from "@/api/index.js";
// 引入uuid
import { v4 as uuidv4 } from "uuid";
export default {
  data() {
    // 只能保证与当前查看页数据中的name不重复，此处不够严谨，也不符合搜索功能需求，
    // 额！还是不验证了
    // const validateName = (rule, value, callback) => {
    //   let arr = [];
    //   if (this.addForm.id) {
    //     arr = this.list
    //       .filter((item) => item.name !== this.catchName)
    //       .map((item) => item.name);
    //   } else {
    //     arr = this.list.map((item) => item.name);
    //   }
    //   arr.includes(value)
    //     ? callback(new Error("任务名称不能重复"))
    //     : callback();
    // };
    return {
      list: [],
      params: {
        _page: 1, // 当前第几页
        _limit: 5, // 每页条数
      },
      total: 0,
      // 控制新增弹层显示或隐藏
      addVisible: false,
      // 新增内容
      addForm: {
        name: "",
        id: "",
        des: "",
      },

      // 当前修改的任务名称
      // catchName: "",

      // 搜索框内容
      inputValue: "",

      rules: {
        name: [
          {
            required: true,
            message: "任务名称不能为空",
            trigger: "blur",
          },
          {
            min: 1,
            max: 10,
            message: "任务名称为1-10位",
            trigger: "blur",
          },
          // {
          //   validator: validateName,
          //   trigger: "blur",
          //   message: "任务名称不能重复",
          // },
        ],
        des: [
          {
            required: true,
            message: "任务描述不能为空",
            trigger: "blur",
          },
          {
            min: 5,
            max: 25,
            message: "任务描述为5~25位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.fetchList();
  },
  methods: {
    // 获取列表数据
    async fetchList() {
      // const res = await getList(this.params);
      // console.log(res);
      const { data, headers } = await getList(this.params);
      // 获取表格数据
      this.list = data;
      // 获取列表数据总数total
      // console.log(this.total);
      //返回的是字符串   接口需要的是number类型

      // 隐式转换不严谨
      // this.total = headers["x-total-count"] - 0;
      this.total = parseInt(headers["x-total-count"]);
    },
    // 页面改变
    pageChange(page) {
      this.params._page = page;
      // 更新列表
      this.fetchList();
    },
    // 新增任务
    openDialog() {
      this.addVisible = true;
    },
    closeDialog() {
      this.addVisible = false;
      this.resetForm();
    },
    resetForm() {
      // 清空校验痕迹
      this.$refs.form.resetFields();
      //清空表单内容
      this.addForm = {
        name: "",
        id: "",
        des: "",
      };
    },
    // 确认添加
    confirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 根据有无id判断是否是新增还是编辑
          if (this.addForm.id) {
            await editTask(this.addForm);
          } else {
            // console.log(uuidv4());    uuidv4()得到唯一的id
            await addTask({ ...this.addForm, id: uuidv4() });
          }

          this.$message.success(`${this.addForm.id ? "编辑" : "新增"}成功`);
          // 更新列表
          this.fetchList();
          this.closeDialog();
        }
      });
    },
    // 获取当前编辑任务详情数据   回显数据
    async updateTask(id) {
      this.addVisible = true;
      const { data } = await getTaskDetail(id);
      this.addForm = data;

      // this.catchName = data.name;
    },
    // 删除任务
    async deleteTask(id) {
      // console.log(id);
      // 调用删除接口
      await delTask(id);
      // 提示用户删除成功
      this.$message.success("删除成功");
      // 更新列表
      this.fetchList();
    },

    // 搜索功能
    async search() {
      // 搜索效果  展示搜索任务的详细数据（需求理解错误）   有bug   pass不采用
      // console.log(this.inputValue);
      // const data = this.list.filter((item) => item.name === this.inputValue);
      // console.log(data);
      // console.log(data[0].id);
      // // const a = data[0].id;
      // // 显示查找任务的详情
      // this.updateTask(data[0].id);

      // 搜索效果    展示所有与搜索任务名称一样的数据
      // const { data } = await getList({
      //   _page: 1, // 当前第几页
      //   _limit: 1000, // 每页条数
      // });
      // // 筛选符合条件的数据
      // const filterdata = data.filter((item) => item.name === this.inputValue);
      // this.list = filterdata;

      // 使用搜索接口
      if (this.inputValue.trim() === "") {
        return this.$message.warning("搜索内容不能为空");
      }

      const { data } = await searchTask(this.inputValue);
      this.list = data;
      this.total = data.length;
      // 未查找到匹配内容
      if (this.total === 0) {
        return this.$message.warning("抱歉未查找到匹配任务");
      }
    },
    // 清空输入框
    clear() {
      // 清空输入框的值
      this.inputValue = "";
      // 重新展示当前页数据
      this.fetchList();
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 800px;
  margin: 0 auto;
}
.search-box {
  display: flex;
  margin-bottom: 10px;
  .input-box {
    margin-right: 20px;
  }
}
.pageContainer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
</style>
